<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="10"
        ><div class="grid-content ep-bg-purple" />
        <div>
          <div>
            <el-button
              style="margin: 5px 0px"
              @click="
                () => {
                  dialogFormVisible = true;
                  dialogTitle = '新增角色';
                  saveData.code = '';
                  saveData.name = '';
                  saveData.id = null;
                }
              "
              size="small"
              >新增角色</el-button
            >
          </div>

          <el-table
            :data="tableData"
            border
            @row-click="getTree"
            style="width: 700px; height: 500px"
          >
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="code" label="编码" />
            <el-table-column prop="name" label="名称" />

            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="change(scope.row, '修改地址')"
                  >修改</el-button
                >
                <el-button
                  link
                  type="danger"
                  size="small"
                  @click="remove(scope.row)"
                  >删除</el-button
                >
                <el-button
                  type="primary"
                  link
                  size="small"
                  @click="saveRoleMenu(scope.row)"
                  >保存权限</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <div class="demo-pagination-block">
            <el-pagination
              v-model:current-page="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange(currentPage)"
            />
          </div>
        </div>
      </el-col>

      <el-col :span="4"
        ><div style="margin-top: 30px">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>菜单</span>
              </div>
            </template>
            <el-tree
              ref="treeRef"
              style="max-width: 200px"
              :data="menuList"
              show-checkbox
              node-key="id"
              default-expand-all
              :default-checked-keys="checkMenuIdList"
              :props="props"
            />
          </el-card></div
      ></el-col>
    </el-row>

    <el-dialog
      v-model="dialogFormVisible"
      label-width="auto"
      style="max-width: 600px"
      draggable
      overflow
    >
      <h2 style="margin-top: -30px">{{ dialogTitle }}</h2>

      <el-form :model="saveData" label-width="auto" style="max-width: 500px">
        <el-form-item
          label="角色编码"
          prop="code"
          :rules="[{ required: true, message: '角色编码必填' }]"
        >
          <el-input v-model="saveData.code" clearable />
        </el-form-item>

        <el-form-item
          label="角色名称"
          prop="name"
          :rules="[{ required: true, message: '角色名称必填' }]"
        >
          <el-input v-model="saveData.name" clearable />
        </el-form-item>
        <!-- <el-form-item label="电话号码">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="saveDataBtn"> 保存 </el-button>

          <el-button @click="dialogFormVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { ref, onMounted, computed, reactive, watch } from "vue";
import { ElMessage } from "element-plus";

import * as roleApi from "@/api/roleApi";

import * as menuApi from "@/api/menuApi";

const tableData = ref([]);

const menuList = ref([]);

const treeRef = ref();

const roleId = ref();

const props = {
  label: "name",
};

const checkMenuIdList = ref([]);

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const dialogTitle = ref();

const dialogFormVisible = ref(false);

const saveData = reactive({
  id: null,
  code: "",
  name: "",
});

const query = reactive({
  code: "",
  name: "",
  pageSize: pageSize.value,
  pageCurrent: currentPage.value,
});

function change(data, title) {
  dialogTitle.value = title;
  dialogFormVisible.value = true;
  saveData.id = data.id;
  saveData.code = data.code;
  saveData.name = data.name;
}

function getCheckedKeys() {
  console.log(treeRef.value.getCheckedKeys(false));
}

function saveRoleMenu() {
  treeRef.value.getCheckedKeys(false);
  menuApi
    .saveRoleMenu({
      menuIds: treeRef.value.getCheckedKeys(false),
      roleId: roleId.value,
    })
    .then((response) => {
      if (response.data.code == 200) {
        ElMessage("保存成功");
        getTree({ id: roleId.value });
      }
    });
}

function handleCurrentChange(currentPage) {
  query.pageCurrent = currentPage;
  roleApi.list(query).then((response) => {
    if (response.data.code == 200) {
      tableData.value = response.data.data.records;
      total.value = response.data.data.total;
      pageSize.value = response.data.data.size;
    }
  });
}

function getTree(data) {
  roleId.value = data.id;
  menuApi.checkRole({ roleId: data.id }).then((response) => {
    if (response.data.code == 200) {
      menuList.value = response.data.data.menuList;
      checkMenuIdList.value = response.data.data.checkMenuIdList;
    }
  });
}

function queryPage() {
  roleApi.page(query).then((response) => {
    if (response.data.code == 200) {
      tableData.value = response.data.data.records;
      total.value = response.data.data.total;
      pageSize.value = response.data.data.size;

      getTree(tableData.value[0]);
    }
  });
}

function saveDataBtn() {
  roleApi.save(saveData).then((response) => {
    if (response.data.code == 200) {
      ElMessage("保存成功");
      saveData.id = null;
      saveData.code = "";
      saveData.name = "";
      queryPage();
    }
  });
  dialogFormVisible.value = false;
}

function remove(data) {
  roleApi.remove(data).then((response) => {
    if (response.data.code == 200) {
      ElMessage("删除成功");
      queryPage();
    }
  });
}

// 生命周期钩子
onMounted(() => {
  queryPage();
});
</script>

<style>
</style>
